<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>共享米宝管理后台 - 用户关系管理</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../assets/css/custom.css">
</head>
<body class="bg-gray-100">
    <div class="admin-container flex">
        <!-- Sidebar -->
        <div class="w-64 bg-gray-800 min-h-screen flex-shrink-0">
            <div class="p-4 text-white">
                <div class="flex items-center mb-6">
                    <i class="fas fa-bolt mr-2 text-yellow-400"></i>
                    <span class="text-lg font-medium">共享米宝管理系统</span>
                </div>
                
                <nav>
                    <a href="index.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-chart-line mr-2"></i> 控制台
                    </a>
                    <a href="users.html" class="block py-2 px-4 rounded bg-gray-700 mb-1">
                        <i class="fas fa-users mr-2"></i> 用户管理
                    </a>
                    <a href="investors.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-user-tie mr-2"></i> 投资人管理
                    </a>
                    <a href="devices.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-battery-full mr-2"></i> 设备管理
                    </a>
                    <a href="revenue.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-money-bill-wave mr-2"></i> 收益管理
                    </a>
                    <a href="commission-settings.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-cog mr-2"></i> 分润设置
                    </a>
                </nav>
            </div>
        </div>

        <!-- Main content -->
        <div class="flex-grow">
            <!-- Header -->
            <header class="bg-white shadow-sm">
                <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                    <div class="flex items-center">
                        <a href="users.html" class="text-gray-500 mr-2">
                            <i class="fas fa-arrow-left"></i>
                        </a>
                        <h1 class="text-xl font-medium">用户关系管理</h1>
                    </div>
                    <div class="flex items-center">
                        <span class="mr-4">管理员</span>
                        <img class="h-8 w-8 rounded-full" src="https://via.placeholder.com/40" alt="管理员头像">
                    </div>
                </div>
            </header>

            <!-- Page content -->
            <main class="container mx-auto p-4">
                <!-- Search and Filter -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex flex-wrap gap-4">
                        <!-- Search by User -->
                        <div class="flex-grow min-w-[250px]">
                            <label class="block text-sm text-gray-600 mb-1">用户搜索</label>
                            <div class="flex">
                                <input type="text" class="w-full border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="手机号/ID/姓名">
                                <button class="bg-blue-500 text-white px-4 py-2 rounded-r-md">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Filter by Relationship Type -->
                        <div class="w-48">
                            <label class="block text-sm text-gray-600 mb-1">关系类型</label>
                            <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">全部</option>
                                <option value="referral">分享关系</option>
                                <option value="investor">投资关系</option>
                                <option value="recruiter">招商关系</option>
                            </select>
                        </div>

                        <!-- Filter by Date -->
                        <div class="w-48">
                            <label class="block text-sm text-gray-600 mb-1">创建时间</label>
                            <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">全部时间</option>
                                <option value="last7days">最近7天</option>
                                <option value="last30days">最近30天</option>
                                <option value="last3months">最近3个月</option>
                                <option value="custom">自定义</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Relationship Management -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-lg font-medium">用户关系列表</h2>
                        <button class="bg-blue-500 text-white px-4 py-2 rounded-md text-sm flex items-center">
                            <i class="fas fa-plus mr-2"></i>
                            创建关系
                        </button>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户A</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">关系类型</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户B</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分润比例</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-8 w-8 rounded-full mr-3" src="https://via.placeholder.com/40" alt="用户头像">
                                            <div>
                                                <div class="text-sm font-medium">张小明</div>
                                                <div class="text-xs text-gray-500">13812345678</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                            分享人
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-8 w-8 rounded-full mr-3" src="https://via.placeholder.com/40" alt="用户头像">
                                            <div>
                                                <div class="text-sm font-medium">李小红</div>
                                                <div class="text-xs text-gray-500">13987654321</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-04-15</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">10%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            有效
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3">编辑</a>
                                        <a href="#" class="text-red-500">解绑</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-8 w-8 rounded-full mr-3" src="https://via.placeholder.com/40" alt="用户头像">
                                            <div>
                                                <div class="text-sm font-medium">王大力</div>
                                                <div class="text-xs text-gray-500">13611112222</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                            招商人
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-8 w-8 rounded-full mr-3" src="https://via.placeholder.com/40" alt="用户头像">
                                            <div>
                                                <div class="text-sm font-medium">赵强</div>
                                                <div class="text-xs text-gray-500">13522223333</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-03-22</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">8%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            有效
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3">编辑</a>
                                        <a href="#" class="text-red-500">解绑</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-8 w-8 rounded-full mr-3" src="https://via.placeholder.com/40" alt="用户头像">
                                            <div>
                                                <div class="text-sm font-medium">刘婷</div>
                                                <div class="text-xs text-gray-500">13588889999</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                            分享人
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-8 w-8 rounded-full mr-3" src="https://via.placeholder.com/40" alt="用户头像">
                                            <div>
                                                <div class="text-sm font-medium">周小川</div>
                                                <div class="text-xs text-gray-500">13566667777</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-04-02</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">10%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                            已解绑
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3">编辑</a>
                                        <a href="#" class="text-green-500">重新绑定</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="flex justify-between items-center mt-6">
                        <div class="text-sm text-gray-500">
                            显示 1-10 条，共 42 条
                        </div>
                        <div class="flex space-x-1">
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-gray-50">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-blue-500 text-white">
                                1
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                2
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                3
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                4
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                5
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-gray-50">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Create/Edit Relationship Modal -->
                <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
                    <div class="bg-white rounded-lg p-6 max-w-md w-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">创建/编辑用户关系</h3>
                            <button class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">用户A (分享人/招商人)</label>
                                <div class="flex">
                                    <input type="text" class="w-full border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="手机号/ID">
                                    <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-r-md">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">关系类型</label>
                                <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="referral">分享关系</option>
                                    <option value="recruiter">招商关系</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">用户B (被推荐人/投资人)</label>
                                <div class="flex">
                                    <input type="text" class="w-full border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="手机号/ID">
                                    <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-r-md">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">自定义分润比例</label>
                                <div class="flex items-center">
                                    <input type="number" min="0" max="100" class="w-24 border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <span class="px-2 py-2 bg-gray-100 border-t border-b border-r border-gray-300">%</span>
                                    <div class="ml-2 flex items-center">
                                        <input type="checkbox" id="use-default" class="mr-2">
                                        <label for="use-default" class="text-sm">使用默认值</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">状态</label>
                                <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="active">有效</option>
                                    <option value="inactive">无效</option>
                                </select>
                            </div>
                            
                            <div class="flex justify-end space-x-2 pt-4">
                                <button class="px-4 py-2 border border-gray-300 rounded-md text-sm">
                                    取消
                                </button>
                                <button class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm">
                                    保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript for functionality -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Add event listeners for buttons
            const buttons = document.querySelectorAll('button');
            buttons.forEach(button => {
                button.addEventListener('click', function(e) {
                    console.log('Button clicked:', this.textContent.trim());
                    // Handle different button actions
                    const buttonText = this.textContent.trim();
                    
                    if (buttonText.includes('搜索')) {
                        alert('执行搜索操作');
                    } else if (buttonText.includes('导出Excel')) {
                        alert('导出Excel文件');
                    } else if (buttonText.includes('查看关系链') || buttonText.includes('查看用户')) {
                        alert('查看用户关系详情');
                    }
                });
            });
            
            // Add event listeners for links
            const links = document.querySelectorAll('a');
            links.forEach(link => {
                link.addEventListener('click', function(e) {
                    // Prevent default only for # links that don't have a real destination
                    if (this.getAttribute('href') === '#') {
                        e.preventDefault();
                        console.log('Link clicked:', this.textContent.trim());
                        const linkText = this.textContent.trim();
                        
                        if (linkText === '查看详情') {
                            alert('查看用户详情');
                        } else if (linkText === '编辑') {
                            alert('编辑用户信息');
                        } else if (linkText === '解除关系') {
                            if (confirm('确定要解除此关系吗？')) {
                                alert('关系已解除');
                            }
                        }
                    }
                });
            });
            
            // Pagination functionality
            const paginationButtons = document.querySelectorAll('.flex.space-x-1 button');
            paginationButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // Remove active class from all buttons
                    paginationButtons.forEach(btn => {
                        btn.classList.remove('bg-blue-500', 'text-white');
                    });
                    
                    // Add active class to clicked button if it's a page number
                    if (!this.querySelector('i')) {
                        this.classList.add('bg-blue-500', 'text-white');
                    }
                });
            });
        });
    </script>
</body>
</html> 